<template>
    <div ref="chartDom" :style="{ width: '100%', height: '400px' }"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, ref, watch } from 'vue';

// 接收传入的年份
const props = defineProps({
    year: {
        type: Number,
        required: true,
    },
});

const chartDom = ref();
let chart;

const initChart = (filteredData) => {
chart = echarts.init(chartDom.value);
chart.setOption({
    title: {
        text: `月度课时消费统计 - ${props.year}年`,
        left: 'center',
    },
    tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
        },
    },
    legend: {
        left: 'right',
        top: 'bottom',
        orient: 'vertical',
    },
    xAxis: {
        name: '月份',
        type: 'category',
        axisTick: { show: false },
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        axisLabel: {
            interval: 0,
        },
    },
    yAxis: [
        {
            name: '课消次数',
            type: 'value',
            position: 'left',
        },
        {
            name: '课消金额 (元)',
            type: 'value',
            position: 'right',
        },
    ],
    toolbox: {
        show: true,
        feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: {
                show: true,
                type: ['line', 'bar'],
            },
            restore: { show: true },
            saveAsImage: { show: true },
        },
    },
    grid: {
        left: '3%',
        right: '15%',
        bottom: '3%',
        containLabel: true
    },
    series: [
        {
            name: '张老师课消次数',
            type: 'bar',
            data: filteredData.zhangTeacher.counts,
        },
        {
            name: '张老师课消金额',
            type: 'line',
            yAxisIndex: 1,
            data: filteredData.zhangTeacher.amounts,
            lineStyle: {
                width: 2,
            },
            symbol: 'circle',
            symbolSize: 8,
        },
        {
            name: '李老师课消次数',
            type: 'bar',
            data: filteredData.liTeacher.counts,
        },
        {
            name: '李老师课消金额',
            type: 'line',
            yAxisIndex: 1,
            data: filteredData.liTeacher.amounts,
            lineStyle: {
                width: 2,
            },
            symbol: 'circle',
            symbolSize: 8,
        },
        {
            name: '王老师课消次数',
            type: 'bar',
            data: filteredData.wangTeacher.counts,
        },
        {
            name: '王老师课消金额',
            type: 'line',
            yAxisIndex: 1,
            data: filteredData.wangTeacher.amounts,
            lineStyle: {
                width: 2,
            },
            symbol: 'circle',
            symbolSize: 8,
        },
        {
            name: '赵老师课消次数',
            type: 'bar',
            data: filteredData.zhaoTeacher.counts,
        },
        {
            name: '赵老师课消金额',
            type: 'line',
            yAxisIndex: 1,
            data: filteredData.zhaoTeacher.amounts,
            lineStyle: {
                width: 2,
            },
            symbol: 'circle',
            symbolSize: 8,
        },
        {
            name: '孙老师课消次数',
            type: 'bar',
            data: filteredData.sunTeacher.counts,
        },
        {
            name: '孙老师课消金额',
            type: 'line',
            yAxisIndex: 1,
            data: filteredData.sunTeacher.amounts,
            lineStyle: {
                width: 2,
            },
            symbol: 'circle',
            symbolSize: 8,
        },
    ],
});
};

const filterDataByYear = (year) => {
    // 模拟过滤后的数据（根据实际需求，你可以从 API 获取数据）
    const allData = {
        2024: {
            zhangTeacher: {
                counts: [16, 8, 14, 11, 19, 10, 17, 20, 5, 12, 6, 18],
                amounts: [4000, 2000, 3500, 2200, 5320, 2200, 4623, 5320, 1105, 3348, 1470, 5400],
            },
            liTeacher: {
                counts: [15, 3, 19, 8, 17, 6, 13, 14, 10, 12, 4, 16],
                amounts: [4230, 615, 5214, 2000, 5036, 1380, 3190, 3290, 2200, 3312, 964, 4312],
            },
            wangTeacher: {
                counts: [10, 14, 8, 17, 12, 4, 6, 19, 13, 20, 16, 15],
                amounts: [2200, 3290, 1760, 4769, 2880, 944, 1680, 4932, 3380, 4600, 4640, 4140],
            },
            zhaoTeacher: {
                counts: [18, 13, 11, 16, 9, 20, 7, 12, 4, 15, 19, 6],
                amounts: [5094, 3250, 2822, 4352, 2244, 5200, 1596, 3350, 1188, 4290, 5480, 1380],
            },
            sunTeacher: {
                counts: [9, 18, 12, 5, 20, 14, 10, 7, 15, 13, 19, 11],
                amounts: [2286, 4794, 3232, 1150, 5020, 4142, 2440, 1596, 3840, 3410, 5480, 2431],
            }
        },
        2023: {
            zhangTeacher: {
                counts: [11, 14, 8, 19, 13, 7, 12, 15, 6, 18, 4, 10],
                amounts: [2310, 3430, 1720, 5420, 3260, 1540, 3060, 3740, 1332, 4980, 896, 2450],
            },
            liTeacher: {
                counts: [16, 10, 17, 5, 14, 20, 8, 12, 19, 7, 13, 15],
                amounts: [3328, 2480, 4020, 1050, 3422, 5450, 2400, 3000, 4892, 1540, 3276, 3680],
            },
            wangTeacher: {
                counts: [13, 6, 14, 18, 12, 15, 10, 19, 11, 9, 7, 20],
                amounts: [3081, 1380, 3220, 4870, 2736, 4395, 2500, 5550, 2277, 2133, 1435, 4420],
            },
            zhaoTeacher: {
                counts: [10, 17, 12, 9, 15, 6, 18, 11, 20, 8, 4, 14],
                amounts: [2120, 4397, 2556, 2061, 3895, 1308, 4698, 2354, 5720, 1976, 982, 3260],
            },
            sunTeacher: {
                counts: [15, 19, 13, 6, 12, 10, 7, 14, 20, 5, 11, 18],
                amounts: [3000, 5145, 3192, 1368, 2810, 2360, 1680, 4165, 5780, 1010, 2255, 4590],
            },
        },
        2022: {
            zhangTeacher: {
                counts: [14, 10, 17, 9, 20, 7, 12, 5, 11, 18, 6, 15],
                amounts: [3486, 2480, 4930, 2070, 5900, 1540, 3120, 1120, 2541, 4968, 1476, 4395],
            },
            liTeacher: {
                counts: [13, 18, 11, 15, 8, 14, 16, 9, 12, 7, 19, 10],
                amounts: [2834, 5376, 2486, 3720, 1672, 3402, 4290, 1935, 2748, 1365, 5253, 2200],
            },
            wangTeacher: {
                counts: [7, 9, 16, 12, 14, 5, 10, 13, 19, 11, 6, 15],
                amounts: [1540, 2205, 4848, 2964, 3204, 1230, 2320, 3072, 5504, 2354, 1284, 3675],
            },
            zhaoTeacher: {
                counts: [17, 14, 8, 6, 20, 9, 11, 18, 10, 12, 13, 19],
                amounts: [4280, 3220, 2000, 1212, 5420, 2088, 2563, 4716, 2380, 3540, 3141, 5280],
            },
            sunTeacher: {
                counts: [9, 11, 18, 13, 7, 12, 20, 15, 14, 19, 10, 8],
                amounts: [2025, 2541, 5238, 3445, 1617, 3360, 5920, 3510, 4262, 5740, 2400, 1680],
            },
        },
        2021: {
            zhangTeacher: {
                counts: [12, 7, 18, 16, 11, 19, 8, 20, 14, 15, 5, 13],
                amounts: [3000, 1617, 5526, 4896, 2376, 5510, 1768, 6000, 3320, 3740, 1140, 3390],
            },
            liTeacher: {
                counts: [14, 9, 10, 17, 20, 12, 11, 7, 16, 15, 18, 13],
                amounts: [2975, 1980, 2440, 4485, 5920, 3096, 2530, 1519, 4272, 3690, 5328, 2990],
            },
            wangTeacher: {
                counts: [5, 8, 14, 12, 15, 13, 19, 6, 7, 20, 18, 9],
                amounts: [1025, 1608, 3514, 2700, 4305, 3451, 5683, 1200, 1372, 6000, 5364, 2133],
            },
            zhaoTeacher: {
                counts: [18, 15, 7, 12, 19, 20, 9, 10, 16, 14, 11, 6],
                amounts: [5358, 3570, 1589, 2784, 5372, 5580, 1890, 2760, 4560, 3164, 2750, 1242],
            },
            sunTeacher: {
                counts: [14, 16, 10, 5, 8, 13, 20, 15, 18, 11, 19, 12],
                amounts: [3192, 4344, 2380, 1050, 1664, 3350, 6020, 3840, 5538, 2640, 5593, 2988],
            },
        },
        2020: {
            zhangTeacher: {
                counts: [10, 19, 14, 8, 12, 11, 18, 16, 13, 5, 15, 20],
                amounts: [2480, 5371, 3962, 1616, 2832, 2750, 4998, 4768, 3666, 1075, 4555, 6020],
            },
            liTeacher: {
                counts: [15, 6, 20, 9, 13, 12, 19, 8, 10, 7, 16, 14],
                amounts: [3540, 1248, 5860, 1764, 3340, 3060, 5102, 2048, 2540, 1414, 4704, 3290],
            },
            wangTeacher: {
                counts: [18, 13, 16, 7, 11, 15, 10, 14, 19, 12, 9, 20],
                amounts: [5304, 3410, 4944, 1442, 2475, 4315, 2400, 3990, 5830, 3360, 2187, 5860],
            },
            zhaoTeacher: {
                counts: [16, 10, 15, 5, 18, 12, 19, 11, 14, 13, 6, 8],
                amounts: [4928, 2350, 3975, 1140, 4884, 3120, 5283, 2574, 3220, 3390, 1392, 1624],
            },
            sunTeacher: {
                counts: [12, 7, 16, 11, 8, 10, 14, 9, 20, 18, 13, 5],
                amounts: [2580, 1575, 4960, 2497, 1672, 2420, 3500, 1771, 5940, 5288, 3290, 1005],
            },
        }
    };

    return allData[year] || {
        zhangTeacher: { counts: [], amounts: [] },
        liTeacher: { counts: [], amounts: [] },
        wangTeacher: { counts: [], amounts: [] },
        zhaoTeacher: { counts: [], amounts: [] },
        sunTeacher: { counts: [], amounts: [] },
    };
};

watch(() => props.year, (newYear) => {
    const filteredData = filterDataByYear(newYear);
    initChart(filteredData);
});

onMounted(() => {
    const filteredData = filterDataByYear(props.year);
    initChart(filteredData);
});
</script>

<style scoped>
/* Add any specific styles here */
</style>
